<template>
  <!-- 底部选集 -->
  <view class="title-box" :style="{ pointerEvents, bottom: `${bottom}px` }" @click="emits('openIntroClick')">
    <view style="display: flex; align-items: center">
      <image style="width: 14px; height: 14px; margin-right: 4px" src="/static/images/video/ico_tv.svg"></image>
      <text style="font-size: 14px; color: #ffffff">{{ serialNo }} / {{ totalSeqNum }}</text>
      <text style="font-size: 14px; color: #ffffff">・</text>
      <text style="width: 380rpx; overflow: hidden; font-size: 14px; color: #ffffff; text-overflow: ellipsis; white-space: nowrap">
        {{ dramaTitle }}
      </text>
    </view>
    <view>
      <text style="font-size: 14px; color: #ffffff">选集</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'album-title-select',
  });

  defineProps({
    /** 是否可以点击 */
    pointerEvents: { type: Boolean, required: true },
    /** 距离地步的距离 */
    bottom: { type: Number, required: true },
    /** 第几集 */
    serialNo: { type: Number, required: true },
    /** 总集数 */
    totalSeqNum: { type: Number, required: true },
    /** 标题 */
    dramaTitle: { type: String, required: true },
  });

  const emits = defineEmits<{
    (e: 'openIntroClick'): void;
  }>();
</script>

<style lang="scss" scoped>
  .title-box {
    position: fixed;
    bottom: 15px;
    left: 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690rpx;
    height: 40px;
    padding: 0 30rpx;
    background: rgba(80, 80, 80, 0.5);
    border-radius: 8px;
    opacity: 1;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    transition-property: opacity;
  }
</style>
